import '../index.scss'
import { useState } from 'react'


interface SonPropsA {
    sendA: (msg: string) => void,
    name: string
}

interface SonPropsB {
    name: string,
    sendB: (msg: string) => void
}
// 兄弟组件通信 核心：借用同一个父组件 进行传递
// 将 A子组件中的name 传到B子组件中
function A(props: SonPropsA) {
    const name = '我是A组件中的传递的name'
    return (
        <div>
            我是A组件 **{props.name}**
            <button onClick={() => props.sendA(name)}>我是A组件的按钮</button>
        </div>
    )
}

function B(props: SonPropsB) {
    const name = '我是B组件中的传递的name'
    return (    
        <div>
            我是B组件 **{props.name}**
            <button onClick={()=>props.sendB(name)}>我是B组件的按钮</button>
        </div>
    )
}



const App = () => {

    const [nameA, setNameA] = useState('')

    const [nameB, setNameB] = useState('')

    return (
        <div className="app">
            <A name= {nameB} sendA={(e) => setNameA(e)} />
            <B name={nameA} sendB={e=>setNameB(e)} />
        </div>
    )
}

export default App